import React,{useEffect} from "react";
import './RoomPage.css';
import { connect } from 'react-redux';
import RoomLabel from './RoomLabel';
import Overlay from './Overlay';
import ParticipantsSection from './ParticipantsSection/ParticipantsSection';
import ChatSection from './ChatSection/ChatSection';
import VideoSection from './VideoSection/VideoSection';
import WebRTCHandler from "../../utils/webRTCHandler";

const webRTCHandler = new WebRTCHandler();

const RoomPage = ({ roomId, isRoomHost, identity, showOverlay, connectOnlyWithAudio }) => {
    
    useEffect(()=>{
        webRTCHandler.getLocalPreviewAndInitRoomConnection(isRoomHost,identity,roomId,connectOnlyWithAudio);
    },[]);
    
	return (
		<div className="room_container">
			<ParticipantsSection />
			<VideoSection />
			<ChatSection />
			<RoomLabel roomId={roomId} />
			{showOverlay && <Overlay />}
		</div>
	)
}

const mapStateToProps = (state) => {
	return {
		...state,
	};
};
export default connect(mapStateToProps)(RoomPage);

